﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>绘制节点</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" /><link href="../demo.css" rel="stylesheet" type="text/css" />

    
    <script src="../../scripts/boot.js" type="text/javascript"></script>
    
    
    <style type="text/css">
    .folder
    {
        background:url(folder.gif) no-repeat 50% 50%;
    }
    .mini-tree-expand .folder
    {
        background:url(folder-open.gif) no-repeat 50% 50%;
    }
    .file
    {
        background:url(file.gif) no-repeat 50% 50%;        
    }
    
    .blueColor a
    {
        text-decoration:underline;
        color:blue;
    }

    </style>
</head>
<body>
    <h1>绘制节点</h1>          
    
    
    <ul id="tree1" class="mini-tree" url="../data/listTree.txt" style="width:200px;padding:5px;" 
        showTreeIcon="true" textField="text" idField="id" parentField="pid" resultAsTree="false"          
        ondrawnode="onDrawNode" showCheckBox="true"
        >
    </ul>
    <div style="padding-top:5px;color:red;">Note：
        <ol>
            <li>文本内容(nodeHtml)：所有子节点加上超链接</li>
            <li>节点样式(nodeStyle/nodeCls)：父节点高亮显示；子节点斜线、蓝色、下划线显示</li>
            <li>节点图片(iconCls)：修改默认的父子节点图标</li>
            <li>隐藏CheckBox(showCheckBox)：父节点的CheckBox全部隐藏</li>
            <li style="color:Blue;">开发者可以扩展节点判断条件，对文本、样式、图标、CheckBox等做任意自定义。</li>
        </ol>
    </div>
   
        
    <script type="text/javascript">

        function onDrawNode(e) {
            var tree = e.sender;
            var node = e.node;

            var isLeaf = tree.isLeaf(node);

            //所有子节点加上超链接
            if (isLeaf == true) {
                e.nodeHtml = '<a href="http://www.miniui.com/docs/api/' + node.id + '.html" target="_blank">' + node.text + '</a>';
            }

            //父节点高亮显示；子节点斜线、蓝色、下划线显示
            if (isLeaf == false) {
                e.nodeStyle = 'font-weight:bold;';
            } else {
                e.nodeStyle = "font-style:italic;"; //nodeStyle
                e.nodeCls = "blueColor";            //nodeCls
            }

            //修改默认的父子节点图标
            if (isLeaf == false) {
                e.iconCls = "folder";
            } else {
                e.iconCls = "file";
            }

            //父节点的CheckBox全部隐藏
            if (isLeaf == false) {
                e.showCheckBox = false;
            }
        }
    </script>

    <div class="description">
        <h3>Description</h3>
        <p>            
        </p>
    </div>
</body>
</html>